<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="7" :sm="24">
            <a-form-item label="预约时间">
              <a-range-picker format="YYYY-MM-DD HH:mm:ss"
                              :show-time="{
                                hideDisabledOptions: true,
                                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                              }"
                              :placeholder="['开始时间', '结束时间']"
                              @change="onCreateTimeChange"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" STYLE="margin-left: 20px;" icon="download"
                        @click="handleExportXls('来访登记')">导出</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <admissionRegistrationVisitor-modal ref="modalForm" @ok="modalFormOk"></admissionRegistrationVisitor-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import AdmissionRegistrationVisitorModal from './modules/AdmissionRegistrationVisitorModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import moment from 'moment';
import {filterObj} from '@/utils/util'
import {getAction} from '@/api/manage'
import {downFile} from "../../api/manage";

export default {
  name: "AdmissionRegistrationList",
  mixins: [JeecgListMixin],
  components: {
    AdmissionRegistrationVisitorModal
  },
  data() {
    return {
      description: '出入登记管理页面',
      moment,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      loading: false,
      dataSource: [],
      // 查询条件
      queryParam: {},
      // 表头
      // 表头
      columns: [
        {
          title: '来访园区',
          align: "center",
          dataIndex: 'source'
        },
        {
          title: '登记时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '预约时间',
          align: "center",
          dataIndex: 'appointmentTime'
        },
        {
          title: '入园事项',
          align: "center",
          dataIndex: 'purpose'
        },

        {
          title: '接待人',
          align: "center",
          dataIndex: 'receptionPerson'
        },
        {
          title: '接待人部门',
          align: "center",
          dataIndex: 'receptionDepartment'
        },
        {
          title: '单位名称',
          align: "center",
          dataIndex: 'companyName'
        },
        {
          title: '车牌号码',
          align: "center",
          dataIndex: 'carNumberPlate'
        },

        {
          title: '登记姓名',
          align: "center",
          dataIndex: 'visitorsName'
        },
        {
          title: '联系方式',
          align: "center",
          dataIndex: 'visitorsPhone'
        },
        {
          title: '身份证号',
          align: "center",
          dataIndex: 'visitorsIdCard'
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status_dictText'
        },
        {
          title: '离园时间',
          align: "center",
          dataIndex: 'leaveTime'
        },
        {
          title: '随行人员',
          align: "center",
          dataIndex: 'entourage'
        },
      ],
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: "/admissionregistration/admissionRegistration/visitorList",
        delete: "/admissionregistration/admissionRegistration/delete",
        deleteBatch: "/admissionregistration/admissionRegistration/deleteBatch",
        exportXlsUrl: "admissionregistration/admissionRegistration/exportVisitorList",
        importExcelUrl: "admissionregistration/admissionRegistration/importExcel",
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    onCreateTimeChange: function (value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTimeBegin = dateString[0]
      this.queryParam.createTimeEnd = dateString[1]
    },
    searchQuery() {
      this.loadRecordData(1);
    },
    loadRecordData(arg) {
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams();//查询条件
      this.loading = true
      this.dataSource = []
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records;
          this.ipagination.total = res.result.total;
        }
        this.loading = false
      })
    },
    getQueryParams() {

      let param = Object.assign({}, this.queryParam, this.isorter);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);


    },
    handleTableChange(ipagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = ipagination;
      this.loadRecordData();
    },
    handleExportXls(fileName) {
      if (!fileName || typeof fileName != "string") {
        fileName = "导出文件"
      }
      let param = {...this.getQueryParams()};
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(",")
      }
      console.log("导出参数", param)
      downFile(this.url.exportXlsUrl, param).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data], {type: 'application/vnd.ms-excel'}), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data], {type: 'application/vnd.ms-excel'}))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>